<template>
  <div style="height: 100%;width: 100%;overflow: auto;">
    <div class="view-container">
      <div class="top-container">
        <div class="logo-container">
          <div class="image-container" />
          <div class="name-container" />
        </div>
        <div class="blank-container" />
        <div class="statement-container">便  捷</div>
        <div class="divideline-container" />
        <div class="statement-container">快  速</div>
        <div class="divideline-container" />
        <div class="statement-container">容  易</div>
        <div class="blank-container" />
        <div class="tianyan-container">天  演</div>
      </div>
      <div class="register-container">
        <div class="word-container">
          <div class="entitle-container">
            云上数值计算新体验
          </div>
          <div class="segment-container">
            结合云计算能力和丰富的函数库，用户能更简单、更快速的编写和运行数值计算
          </div>
        </div>
        <el-form
          ref="registerForm"
          :model="registerForm"
          :rules="registerRules"
          class="register-form"
          autocomplete="on"
          label-position="left"
        >
          <el-form-item prop="username">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input
              ref="username"
              v-model="registerForm.username"
              placeholder="用户名"
              name="username"
              type="text"
              tabindex="1"
            />
          </el-form-item>

          <el-form-item prop="email">
            <span class="svg-container">
              <svg-icon icon-class="email" />
            </span>
            <el-input
              ref="email"
              v-model="registerForm.email"
              placeholder="邮箱地址"
              name="email"
              type="text"
              tabindex="2"
            />
          </el-form-item>

          <el-tooltip
            v-model="capsTooltip"
            content="大写锁定已打开"
            placement="right"
            :tabindex="-1"
            manual
          >
            <el-form-item prop="password">
              <span class="svg-container">
                <svg-icon icon-class="password" />
              </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model="registerForm.password"
                props="password"
                :type="passwordType"
                placeholder="密码"
                name="password"
                tabindex="3"
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
              />
              <span
                class="show-pwd"
                @click="showPwd"
              >
                <svg-icon
                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-form-item>
          </el-tooltip>

          <el-tooltip
            v-model="capsTooltip2"
            content="大写锁定已打开"
            placement="right"
            :tabindex="-1"
            manual
          >
            <el-form-item prop="password2">
              <span class="svg-container">
                <svg-icon icon-class="password" />
              </span>
              <el-input
                :key="passwordType"
                ref="password2"
                v-model="registerForm.password2"
                props="password2"
                :type="passwordType"
                placeholder="请再次输入密码"
                name="password2"
                tabindex="4"
                @keyup.native="checkCapslock2"
                @blur="capsTooltip2 = false"
              />
              <span
                class="show-pwd"
                @click="showPwd"
              >
                <svg-icon
                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-form-item>
          </el-tooltip>

          <el-form-item prop="captcha">
            <span class="svg-container">
              <svg-icon icon-class="captcha" />
            </span>
            <el-input
              v-model="registerForm.captcha"
              placeholder="请输入验证码"
              tabindex="5"
              maxlength="6"
            />
            <span class="captcha-button">
              <button
                v-if="!loading"
                :disabled="!Boolean(registerForm.email)"
                class="button-primary"
                type="button"
                @click.prevent="handleSend"
              >
                发送验证码
              </button>
              <button
                v-else
                class="button-primary"
                :disabled="true"
                type="button"
              >
                重发({{ auth_time }} s)
              </button>
            </span>
          </el-form-item>
          <el-button
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleYes"
          >
            注册
          </el-button>
          <el-link
            :underline="false"
            class="register-form-goback"
            type="primary"
            @click="gologin"
          >
            返回登录
          </el-link>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userRegister, userGetCap
} from '@/api/userRegister';
export default {
  name: 'Login',
  data() {
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'));
      } else {
        if (value.length < 8 || value.length > 16) {
          callback(new Error('密码长度必须为8到16位'));
        } else {
          var test1 = /^[\da-zA-Z`~!@#$%^&*()_+<>?:"{},.\\/;'[\]]*$/;
          // 是否全部是数字字母半角符号
          var isAllNumAlphabetHalfWidth = test1.test(value);

          if (!/\d/.test(value)) {
            return callback(new Error('密码必须包含数字'));
          } else if (!/[a-zA-Z]/.test(value)) {
            return callback(new Error('密码必须包含字母'));
          } else if (!isAllNumAlphabetHalfWidth) {
            return callback(new Error('密码有不支持的字符（支持半角符号、数字、字母）'));
          } else {
            callback();
          }
        }
      }
    };
    var checkSame = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        return callback(new Error('两次密码输入不一致'));
      } else { callback(); }
    };
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名'));
      } else {
        if (value.length < 4 || value.length > 10) {
          callback(new Error('用户名长度必须为4到10位'));
        } else {
          var test1 = /^[0-9A-Za-z]*$/;
          var isAllNumAlphabet = test1.test(value);
          if (!isAllNumAlphabet) {
            return callback(new Error('用户名只能由数字或字母构成'));
          } else {
            callback();
          }
        }
      }
    };
    var checkCaptcha = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入验证码'));
      } else {
        var test1 = /\d{6}/;
        var flag = test1.test(value);
        if (!flag) {
          callback(new Error('验证码格式错误'));
        } else {
          callback();
        }
      }
    };
    return {
      registerForm: {
        email: '',
        username: '',
        captcha: '',
        password: '',
        password2: ''
      },
      // dialogVisible: false,
      registerRules: {
        username: [{ validator: checkUsername, trigger: 'blur' }],
        password: [{ trigger: 'blur', validator: checkPassword }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        password2: [{ trigger: 'blur', validator: checkSame }],
        captcha: [{ validator: checkCaptcha, trigger: 'blur' }]
      },
      passwordType: 'password',
      capsTooltip: false,
      capsTooltip2: false,
      loading: false,
      auth_time: 0
    };
  },
  mounted() {
    if (this.registerForm.username === '') {
      this.$refs.username.focus();
    }
  },
  methods: {
    checkCapslock(e) {
      this.capsTooltip = e.getModifierState('CapsLock');
    },
    checkCapslock2(e) {
      this.capsTooltip2 = e.getModifierState('CapsLock');
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleSend(event) {
      console.log(event);
      userGetCap(this.registerForm.email).then((res) => {
        this.loading = true;
        this.auth_time = 60;
        var auth_timetimer = setInterval(() => {
          this.auth_time--;
          if (this.auth_time <= 0) {
            this.loading = false;
            clearInterval(auth_timetimer);
          }
        }, 1000);
      });
    },
    handleYes() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          // 表单有效，进行注册
          userRegister(this.registerForm).then((data) => {
            this.loading = false;
            if (data.result === 0) {
              this.$message.success('注册成功');
              this.$router.push('/login');
            } else {
              this.$message.warning(data.rmsg);
              Promise.reject(new Error(data.rmsg));
            }
          });
        } else {
          // 表单格式有错，提示用户
          console.error('error submit!!');
          return false;
        }
      });
    },
    // handleRegister() {
    //   this.$refs.registerForm.validate(valid => {
    //     if (valid) {
    //       this.dialogVisible = true;
    //     } else {
    //       this.dialogVisible = false;
    //       console.error('error submit!!');
    //       return false;
    //     }
    //   });
    // },
    gologin() {
      this.$router.go(-1);
    },
    closereg() {
      this.loading = false;
    }
  }
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #283443;
$light_gray: #eee;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .register-container .el-input input {
    color: $light-gray;
  }
}
/* reset element-ui css */
.register-container {
  .el-input {
    display: inline-block;
    height: 30px;
    width: 85%;
    input {
      background: transparent;
      border: 2px blue;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #454545;
      height: 30px;
      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px white inset;
        -webkit-text-fill-color: #454545 !important;
      }
      &:autofill {
        box-shadow: 0 0 0px 1000px white inset;
        -webkit-text-fill-color: #454545 !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(236, 208, 208, 0.1);
    background: white;
    color: #454545;
    margin-bottom: 35px;
  }

  .el-form-item__content {
    display: flex;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.view-container{
  height: 100%;
  width: 100%;
  min-height: 720px;
  min-width: 1280px;
  font-size:62.5%;
.register-container {
  height: 93%;
  width: 100%;
  min-height: 670px;
  min-width: 1280px;
  background-image: url('../../assets/images/background2.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .word-container {
    position: relative;
    margin: 20px;
    background: transparent;
    width: 700px;
    height: 300px;
    color: white;
    .entitle-container {
      margin-left: 10px;
      font-size: 6em;
    }
    .segment-container {
      margin-top: 10px;
      font-size:2em;
    }
  }
  .register-form {
    height: 540px;
    width: 390px;
    max-width: 100%;
    padding: 45px 35px 20px 35px;
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
    .register-form-goback {
      position: absolute;
      right: 35px;
      bottom: 20px;
    }
  }
  .tips {
    font-size: 14px;
    color: #454545;/*#fff*/
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    padding: 0px 5px 0px 15px;
    color: #454545;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .show-pwd {
    position: absolute;
    right: 12px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .captcha-button {
    width: auto;
    position: absolute;
    font-size: 14px;
    height: 40px;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    line-height: 40px;
    border: none;
    right: 0;
  }

  .el-button + .el-button {
    margin-left: 0px;
  }
  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }
  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }

  .button-primary {
    font-size: 14px;
    padding: 0 0 0 14px;
    border-width: 0;
    height: 21px;
    line-height: 21px;
    margin: 6px 6px 6px 0px;
    border-left: .5px solid #c4cbd7;
    min-width: 80px;
    color: #283443;
    background-color: transparent;
    cursor: pointer;
  }

  .button-primary:disabled {
    color: #999;
    cursor: not-allowed;
  }
}
  .top-container{
     background-color:white;
     height:7%;
     width:100%;
     min-height: 50px;
     min-width: 1280px;
     padding: 5px 10px;
     display:flex;
     align-items:center;
     justify-content:space-around;
     .logo-container{
         height:90%;
         width:11%;
         display:flex;
         align-items:center;
        .name-container{
         height:27%;
         width:60%;
         background-image: url('../../assets/images/tianyan.svg#svg');
         background-repeat:no-repeat;
         background-size:contain;
        }
        .image-container{
         height:75%;
         width:34%;
         background-image:url('../../assets/images/logo.svg#svg');
         background-repeat:no-repeat;
         background-size:contain;
         }
      }
      .statement-container{
         font-style:italic;
         height:52%;
         min-height:26px;
         font-size:2em;
         white-space:pre;
       }
      .tianyan-container{
         font-style:italic;
         height:62%;
         min-height:32px;
         font-size:2.3em;
         white-space:pre;
       }
      .divideline-container{
         height:50%;
         width:2%;
         background-image:url('../../assets/images/divideline.png');
         background-repeat:no-repeat;
         background-size:contain;
       }
       .blank-container{
         height:50%;
         width:20%;
         min-width:100px;
       }
    }
}
</style>
